<!doctype html>
<html>

<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <meta name=description content="Color Scheme for Terminals">
    <meta name=author content="Miguel D. Quintero">
    <link rel=author href=humans.txt>

    <title>Gogh - Color Scheme</title>

    <link rel=icon type=image/png sizes=16x16 href=./favicons/favicon.png>
    <link rel=icon href=favicons/favicon.ico>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism.css">

    <link rel=stylesheet href=./css/main.min.css inline>
</head>

<body>
    <a href=https://github.com/Gogh-Co/Gogh>
        <img
            loading="lazy"
            width="149"
            height="149"
            style="position: absolute; top: 0; right: 0; border: 0;"
            src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png"
            class="attachment-full size-full"
            alt="Fork me on GitHub"
            data-recalc-dims="1">
    </a>

    <header class="gogh-header">
        <h1>
            <span> Gogh </span>
            <img src="https://raw.githubusercontent.com/Gogh-Co/Gogh/master/images/gogh/Gogh-logo-dark.png" alt="">
        </h1>
    </header>

    <div class="gogh-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>
                        Color Scheme for Gnome Terminal, Pantheon Terminal, Tilix, and XFCE4&nbsp;Terminal
                    </h2>

                    <p>
                       Color Schemes For Ubuntu, Linux Mint, Elementary OS and all distributions that use Gnome Terminal, Pantheon Terminal, Tilix, or XFCE4 Terminal; initially inspired by Elementary OS Luna. Also works on iTerm for macOS.
                    </p>

                    <div class=github-int>
                        <a class="github-button"
                           href=https://github.com/Gogh-Co/Gogh
                           data-color-scheme="no-preference: dark; light: light; dark: dark;"
                           data-size=large
                           aria-label="Star ntkme/github-buttons on GitHub">
                           View
                        </a>
                        <!-- Place this tag where you want the button to render. -->
                        <a class="github-button"
                           href="https://github.com/Gogh-Co/Gogh"
                           data-color-scheme="no-preference: dark; light: light; dark: dark;"
                           data-icon="octicon-star"
                           data-size="large"
                           data-show-count="true"
                           aria-label="Star ntkme/github-buttons on GitHub">
                           Star
                       </a>
                    </div>

                    <h3> Install </h3>
                    <p>
                        Just copy and paste One line command.
                    </p>

                    <div class="code-wrap">
                        <h4>Linux <span>(wget)</span></h4>
                        <div class="code-holder">
                            <pre><code class="language-bash" id="code-linux">bash -c  "$(wget -qO- https://git.io/vQgMr)" </code></pre>
                            <span class="btn-copy" data-clipboard-target="#code-linux">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#000" width="48" height="48"> <path d="M27.4,14.7l-6.1-6.1C21,8.2,20.5,8,20,8h-8c-1.1,0-2,0.9-2,2v18c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V16.1C28,15.6,27.8,15.1,27.4,14.7z M20,10l5.9,6H20V10z M12,28V10h6v6c0,1.1,0.9,2,2,2h6l0,10H12z"/> <path d="M6,18H4V4c0-1.1,0.9-2,2-2h14v2H6V18z"/> <rect width="32" height="32" fill="none"/> </svg>
                            </span>
                        </div>
                    </div>

                    <div class="code-wrap">
                        <h4>Mac <span>(curl)</span></h4>
                        <div class="code-holder">
                            <pre><code class="language-bash" id="code-mac">bash -c  "$(curl -sLo- https://git.io/vQgMr)" </code></pre>
                            <span class="btn-copy" data-clipboard-target="#code-mac">
                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#000" width="48" height="48"> <path d="M27.4,14.7l-6.1-6.1C21,8.2,20.5,8,20,8h-8c-1.1,0-2,0.9-2,2v18c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V16.1C28,15.6,27.8,15.1,27.4,14.7z M20,10l5.9,6H20V10z M12,28V10h6v6c0,1.1,0.9,2,2,2h6l0,10H12z"/> <path d="M6,18H4V4c0-1.1,0.9-2,2-2h14v2H6V18z"/> <rect width="32" height="32" fill="none"/> </svg>
                            </span>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <main class=gogh-terminal>
            <div id="js-vue-app">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="filters">
                                <button class="btn js-btn--filter"
                                    :class="{ active: filter === 'all' }"
                                    @click="setFilter('all'); resetMenuSelected()">
                                    All
                                </button>
                                <button class="btn js-btn--filter"
                                    :class="{ active: filter === 'light' }"
                                    @click="setFilter('light'); resetMenuSelected()">
                                    Light Themes
                                </button>
                                <button class="btn js-btn--filter"
                                    :class="{ active: filter === 'dark' }"
                                    @click="setFilter('dark'); resetMenuSelected()">
                                    Dark Themes
                                </button>
                                <button class="btn js-btn--filter-bg"
                                    :class="{ active: selected === 'background' }"
                                    @click="getBackgrounds()">
                                    by Background
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="filter-background js-filter-background" style="display: none;">
                                <template v-for="item in themeBackgrounds">
                                    <button class="btn btn--filter-bg"
                                        :class="{ active: filter === item.toLowerCase() }"
                                        :style="'background-color:' + item"
                                        @click="setFilter(item)">
                                        <span>{{ item.toLowerCase() }}</span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="container-fluid">
                    <div class="row justify-content-center">
                        <template v-for="theme in themes">
                            <div class="col-md-6 col-lg-6 col-xl-4" v-show="filter === theme.category || filter === 'all' || filter === 'background' || filter === theme.background.toLowerCase()">
                                <div class="terminal">
                                    <div class="bar">
                                        <div class="bar__title">
                                            {{ theme.name }}
                                        </div>
                                        <div class="bar__btns">
                                            <span class="btn--terminal btn--min"></span>
                                            <span class="btn--terminal btn--max"></span>
                                            <span class="btn--terminal btn--close"></span>
                                        </div>
                                    </div>
                                    <div class="body" :style="'background-color: ' + theme.background">
                                        <div class="body__bar body__bar--top">
                                            <span :style="'background-color: ' + theme.color_01"></span>
                                            <span :style="'background-color: ' + theme.color_02"></span>
                                            <span :style="'background-color: ' + theme.color_03"></span>
                                            <span :style="'background-color: ' + theme.color_04"></span>
                                            <span :style="'background-color: ' + theme.color_05"></span>
                                            <span :style="'background-color: ' + theme.color_06"></span>
                                            <span :style="'background-color: ' + theme.color_07"></span>
                                            <span :style="'background-color: ' + theme.color_08"></span>
                                        </div>
                                        <div class="body__bar body__bar--bottom">
                                            <span :style="'background-color: ' + theme.color_09"></span>
                                            <span :style="'background-color: ' + theme.color_10"></span>
                                            <span :style="'background-color: ' + theme.color_11"></span>
                                            <span :style="'background-color: ' + theme.color_12"></span>
                                            <span :style="'background-color: ' + theme.color_13"></span>
                                            <span :style="'background-color: ' + theme.color_14"></span>
                                            <span :style="'background-color: ' + theme.color_15"></span>
                                            <span :style="'background-color: ' + theme.color_16"></span>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-6 col-md-12 col-lg-6 col-xl-6">
                                                <div class="body__txt">
                                                    <p :style="'color: ' + theme.color_01">
                                                        <span> AaBbMmYyZz - {{ theme.color_01 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_02">
                                                        <span> AaBbMmYyZz - {{ theme.color_02 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_03">
                                                        <span> AaBbMmYyZz - {{ theme.color_03 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_04">
                                                        <span> AaBbMmYyZz - {{ theme.color_04 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_05">
                                                        <span> AaBbMmYyZz - {{ theme.color_05 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_06">
                                                        <span> AaBbMmYyZz - {{ theme.color_06 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_07">
                                                        <span> AaBbMmYyZz - {{ theme.color_07 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_08">
                                                        <span> AaBbMmYyZz - {{ theme.color_08 }}</span>
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-sm-6 col-md-12 col-lg-6 col-xl-6">
                                                <div class="body__txt">
                                                    <p :style="'color: ' + theme.color_09">
                                                        <span> AaBbMmYyZz - {{ theme.color_09 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_10">
                                                        <span> AaBbMmYyZz - {{ theme.color_10 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_11">
                                                        <span> AaBbMmYyZz - {{ theme.color_11 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_12">
                                                        <span> AaBbMmYyZz - {{ theme.color_12 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_13">
                                                        <span> AaBbMmYyZz - {{ theme.color_13 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_14">
                                                        <span> AaBbMmYyZz - {{ theme.color_14 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_15">
                                                        <span> AaBbMmYyZz - {{ theme.color_15 }}</span>
                                                    </p>
                                                    <p :style="'color: ' + theme.color_16">
                                                        <span> AaBbMmYyZz - {{ theme.color_16 }}</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>


                                        <div class="cmd">
                                            <span class="cmd__ini" :style="'color: ' + theme.foreground">$ </span>
                                            <span class="cmd__sudo" :style="'color: ' + theme.color_02">sudo </span>
                                            <span class="cmd__apt" :style="'color: ' + theme.color_03">apt </span>
                                            <span class="cmd__install" :style="'color: ' + theme.foreground">install </span>
                                            <span class="cmd__linux" :style="'color: ' + theme.foreground">linux </span>
                                            <span class="cmd__cursor" :style="'color: ' + theme.cursor">|</span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/chroma-js@2.1.1/chroma.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/prism.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/shufflejs@5.3.0/dist/shuffle.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>

    <script src=https://buttons.github.io/buttons.js async="" defer="" id=github-bjs></script>

    <script src="https://unpkg.com/vue@next"></script>

    <script src=./js/main.js inline></script>

    <div id=master-dev style=display:none>
      4d 69 67 75 65 6c 20 44 2e 20 51 75 69 6e 74 65 72 6f 20 2d 20 6d 69 67 75 65 6c 64 61 76 69 64 71 40 67 6d 61 69 6c 2e 63 6f 6d
    </div>

</body>
</html>
